<!-- 购物车 -->
<template>
  <view class="cart-container" v-if="cartItems.length>0">
    <!-- 地址 -->
    <MyAddress></MyAddress>
    <!-- 购物车商品列表的标题区域 -->
    <view class="cart-title">
      <!-- 左侧的图标 -->
      <uni-icons type="shop" size="18"></uni-icons>

      <!-- 描述文本 -->
      <text class="cart-title-text">购物车</text>
    </view>
    <!-- 商品列表区域 -->
    <uni-swipe-action>
<block v-for="item in cartItems" :key="item.goods_id">
  <uni-swipe-action-item
     :right-options="swipeOptions"
     @click="swipeActionClickHandler(item)"
    >
   
  <view class="goods-item">
    
    <!-- 商品左侧图片区域 -->
    <view class="goods-item-left">
      <radio
  :checked="item.goods_state"
  color="#C00000"
  @click="radioChangeHandler(item)"></radio>
      <image
             :src="item.goods_small_logo || defaultImage"
             class="goods-pic"
             ></image>
    </view>
    
    <!-- 商品右侧信息区域 -->
    <view class="goods-item-right">
      <!-- 商品标题 -->
      <view class="goods-name">{{ item.goods_name }}</view>
      <view class="goods-info-box">
        <!-- 商品价格 -->
        <view class="goods-price">￥{{ item.goods_price | formatNum }}</view>
        <view class="goods-info-box">
      <!-- 商品价格 -->
      <!-- <view class="goods-price">￥{{ product.goods_price | tofixed }}</view> -->
  
      <!-- 商品数量 -->
      <uni-number-box @change="changeValue(item,$event)" :min="1" :value="item.goods_count"></uni-number-box>
    </view>
      </view>
    </view>
    
  </view>
</uni-swipe-action-item>
</block>
</uni-swipe-action>
<MyCheckout></MyCheckout>
  </view>
  	<!-- 购物车无商品时 -->
    <view class="empty-cart" v-else>
    <text class="tip-text">空空如也~</text>
  </view>
</template>

<script>
import uniNumberBox from '@dcloudio/uni-ui/lib/uni-number-box/uni-number-box.vue'
import {  mapState } from 'vuex';
import MyAddress from '../../components/my-address.vue'
import MyCheckout from '../../components/my-checkout.vue'
import badge from '../../mixins/badge'//导入混入
// import { mapGetters } from 'vuex';
export default {
  mixins:[badge],//混入使用方法,这就相等于在页面写了badge里的内容
  components: {
    uniNumberBox,  // 注册组件
    MyAddress,//地址组件
    MyCheckout//结算组件
  },
  data(){
    return{
      defaultImage:
        'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png',
        swipeOptions: [
        {
          text: "删除", // 显示的按钮文本
          style: {
            backgroundColor: "#C00000", // 按钮的背景颜色
          }
        }
      ]
    }
  },
  computed:{
    ...mapState("cart",["cartItems"]),
    // ...mapGetters("cart",["totalCount"])
  },
  onShow() {
//问题:商品详情点击加入购物车当前页购物车角标totalCount正确展示,但点击购物车图标跳转购物车页面购物车的角标没更新!!!
//原因: 小程序页面组件一般不会卸载, 所以侦听器立即执行那次只触发一次
// 一旦点了4个页面(首页,分类,购物车,我的), 就会设置四个侦听器, 只要totalCount变化, 4个侦听器都执行(执行了四次),
// 而执行是在非tabbar页面, 所以失效.
//等到了购物车页面, 此时,进入页面那次不会执行了(不卸载), 而totalCount也没变化了, 也不会执行
//setTabBarBadge只支持在tabBar页面导致我们不可以在商品详情页面(非tabBar页面),无法设置setTabBarBadge更新角标
//所以为了在进入购物车页面时 重新设置角标代码执行, 在onShow(只要页面显示就会触发钩子函数)在里面执行`uni.setTabBarBadge`
//应该给四个页面都加上这个逻辑, 放到mixins中
//解决方法:
console.log("仓库",this.$store.state.cart.cartItems);
if(this.$store.state.cart.cartItems>0){
  uni.setTabBarBadge({
   index:2,
//因为已经有mixins:[badge]混入,相当于这个页面已经引入mapGetters辅助函数和暴露totalCount方法,直接this就可以拿到
   text:''+this.totalCount
  })
}else{
  uni.removeTabBarBadge({
    index:2
  })
}
  },
  // watch:{
  //   totalCount:{
  //     immediate: true,//进入页面立即执行
  //   handler(newVal) {
  //     if(newVal>0){//删除的时候会显示0,判断大于0才能展示文本否则不展示
  //       uni.setTabBarBadge({//小程序aip,设置导航栏右上角角标
  //        index: 2,//下标为第三
  //        text: ''+newVal,//text必须是字符串,""+number可以转成字符串
  //       }) 
  //     }else{
  //       //=0列表为空的时候删除角标
  //       uni.removeTabBarBadge({//移除角标
  //         index:2
  //       })
  //     }
  //   }
  //   }
  // },
  methods:{
    //选中状态
    radioChangeHandler(item){
      this.$store.commit('cart/changestate',item)
    },
    //改变数量
    changeValue(item,num){
      this.$store.commit('cart/changecount',{item,num})
    },
    //删除
    swipeActionClickHandler(item){
      console.log(item);
      this.$store.commit('cart/removeitem',item.goods_id)
    }
  }
}
</script>

<style lang="scss" scoped>
.empty-cart {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 300rpx;

  .tip-text {
    font-size: 24rpx;
    color: gray;
    margin-top: 30rpx;
  }
}
.cart-container {
  padding-bottom: 100rpx;
}
.goods-item-right {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;

  .goods-name {
    font-size: 26rpx;
  }

  .goods-info-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .goods-price {
    font-size: 32rpx;
    color: #c00000;
  }
}
.cart-title {
  height: 80rpx;
  display: flex;
  align-items: center;
  font-size: 28rpx;
  padding-left: 10rpx;
  border-bottom: 1rpx solid #efefef;
  .cart-title-text {
    margin-left: 20rpx;
  }
}
.goods-item {
  display: flex;
  padding: 20rpx 10rpx;
  border-bottom: 1rpx solid #f0f0f0;
  width: 750rpx;
  box-sizing: border-box;
  
  .goods-item-left {
    margin-right: 10rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .goods-pic {
      width: 200rpx;
      height: 200rpx;
      display: block;
    }
  }

  .goods-item-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .goods-name {
      font-size: 26rpx;
    }

    .goods-price {
      font-size: 32rpx;
      color: #c00000;
    }
  }
}
</style>